
<template>
  <view class="page">
    <view class="calendar-wrap">
      <calendar
        :date="date"
        :lunar="false"
        :showCurrentWeek="showCurrentWeek"
        @change="change"
        @to-click="toClick"
      />
      <view @click="toggle" :class="['arrow',showCurrentWeek?'arrow-down':'']"></view>
      <!-- <view class="arrow arrow-down"></view> -->
    </view>
    <view class="study-record">
      <view
        @click="dispatchFunc(item)"
        class="list__contentin"
        v-for="(item,index) in studyList"
        :key="index"
      >
        <text :class="['text-icon',item.type=='exercise' ? 'text-icon-red' : '']">{{item.typeName}}</text>
        <view class="list__contentin-text">
          <view class="text__title2">{{ item.title }}</view>
          <!--					<view class="text__title3">{{ item.date }}</view>-->
        </view>
      </view>
    </view>

    <view class="loading" v-if="noData">没有数据,快去学习吧~</view>
  </view>
</template>


<script>
import calendar from "@/components/uni-calendar/uni-calendar";
import { mapState } from "vuex";
import { getNowFormatDate } from "@/utils/index";
import MineService from "@/services/mine/index";
const mineService = new MineService();

export default {
  components: {
    calendar
  },
  computed: {},
  data() {
    return {
      date: getNowFormatDate(),
      noData: false,
      studyList: [
        // {
        // 	id: '1',
        // 	title: '公务员-法律中的“18岁”学习为主',
        // 	date: '2019/01/23',
        // 	flagLabel:'视',
        // 	route:'/pages/tabbar/study/details/index?id=${id}&type=1'
        // },
        // {
        // 	id: '2',
        // 	title: '公务员-法律中的“18岁”学习为主之考点集锦（一）',
        // 	date: '2019/01/23',
        // 	flagLabel:'文',
        // 	route:'/pages/tabbar/study/details/index?id=${id}&type=2'
        // },
        // {
        // 	id: '3',
        // 	title: '公务员-法律中的“18岁”学习为主之考点集锦（一）',
        // 	date: '2019/01/23',
        // 	flagLabel:'考',
        // 	route:'/pages/exam/answerAnalysis?examId=100101&analyType=' + 3
        // },
        // {
        // 	id: '4',
        // 	title: '公务员-法律中的“18岁”学习为主之考点集锦（一）',
        // 	date: '2019/01/23',
        // 	flagLabel:'视',
        // 	route:'/pages/tabbar/study/details/index?id=${id}&type=1'
        // },
        // {
        // 	id: '5',
        // 	title: '公务员-法律中的“18岁”学习为主之考点集锦（一）',
        // 	date: '2019/01/23',
        // 	flagLabel:'职',
        // 	route:'/pages/tabbar/study/details/index?id=${id}&type=3'
        // },
      ],
      showCurrentWeek: false
    };
  },
  methods: {
    change(e) {
      console.log(e);
      this.loadData(e.fulldateLabel);
    },
    toClick(e) {
      console.log(e);
      this.loadData(e.fulldateLabel);
    },
    toggle() {
      this.showCurrentWeek = !this.showCurrentWeek;
    },
    dispatchFunc(item) {
			console.log(item)
      if (item.id != undefined) {
        uni.navigateTo({
          url: "/pages/tabbar/study/details/index?id=" + item.learnId + "&type=" + item.learnType
        });
        return;
      }
    },
    loadData(date) {
      const $this = this;
      mineService.getStudyRecord({ date }).then(resultDto => {
        const { success, result } = resultDto;
        if (success) {
          $this.studyList = result.list;
          this.noData = result.list.length == 0;
        }
      });
    }
  },
  onLoad() {
    //this.loadData(this.date);
  }
};
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}
.calendar-wrap {
  position: relative;
  padding-bottom: 20upx;
  background-color: #fff;
}
.uni-calender__body-date-week .uni-calender__date {
  padding: 0;
}
.study-record {
  margin-top: 16upx;
  background-color: #fff;
}

.list__contentin {
  padding: 40upx 0;
  margin: 0 20upx;
  border-bottom: 1upx solid #ebebeb;
  display: flex;
  align-items: center;
  &-imgboxs {
    position: relative;
    margin-right: 20upx;
    .list__contentin-img1 {
      width: 240upx;
      height: 140upx;
    }
    .list__contentin-imgMark {
      position: absolute;
      bottom: 16upx;
      right: -6upx;
      line-height: 32upx;
      height: 32upx;
      padding: 0 4upx;
      background-color: #ffa400;
      font-size: 20upx;
      color: #fff;
      border-radius: 8upx 0px 8upx 0px;
    }
  }

  .list__contentin-img2 {
    width: 70upx;
    height: 70upx;
    border-radius: 50%;
    margin-right: 20upx;
  }

  &-text {
    flex: 1;
    .text__title1 {
      font-size: 28upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .text__title2 {
      font-size: 28upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .text__title3 {
      font-size: 20upx;
      color: #999;
      margin-top: 10upx;
    }
    .text__header {
      display: flex;
      margin-top: 32upx;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .text__namebox {
        overflow: hidden;
        .text__header-img {
          width: 28upx;
          height: 28upx;
          border-radius: 50%;
          margin-right: 10upx;
          margin-top: 4upx;
          float: left;
        }
        .text__header-name {
          float: left;
          color: #999;
          font-size: 24upx;
          text-align: left;
        }
      }

      &-collection {
        color: #999;
        font-size: 24upx;
        text-align: right;
      }
    }
  }
}
.list__contentin:last-child {
  border-bottom: 0;
}
.arrow {
  width: 56upx;
  height: 56upx;
  background-image: url("~@/static/img/mine/arrow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -32upx;
  right: 100upx;
  &.arrow-down {
    background-image: url("~@/static/img/mine/arrow-down.png");
    background-repeat: no-repeat;
  }
}
.text-icon {
  width: 100upx;
  height: 38upx;
  line-height: 38upx;
  text-align: center;
  font-size: 20upx;
  color: #fff;
  background-color: #4a96f2;
  border-radius: 32upx;
  margin-right: 20upx;
}
.text-icon-red {
  background-color: #f15151;
}
.loading {
	text-align: center;
	font-size: 28upx;
	padding: 80upx 0;
	color: #999;
}
</style>